<template>
    <div class="transactions">
        <ItemDetail :loading="tableLoading" :show.sync="showModal" :value="item" :title="`${action} Item`" :id="itemID"  :action="action"
                    @submit="confirmSubmit"  :height="600">

        </ItemDetail>

        <div class="row">
            <div class="col-md-12 p-0">
                <filter-form v-if="filters.length" :columns="filters" @submit="submit"></filter-form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 bg-white p-0 m-0">
                <item-table title="Transactions List" :columns="defaultColumns" :data="data" :loading="tableLoading" @sort="sort"
                            :total="total" :model="model" isColumns isAdd @add="addItem"
                >
                    <template slot="amount" slot-scope="props">
                        <div>
                            {{ genFee(props.item.amount, props.item.currency) }}
                        </div>
                        <i class="ti-text text-info" @click="showTdDetail(props.item.room_title)"></i>
                    </template>
                    <template slot="fee_detail" slot-scope="props">
                        <button v-if="props.item.order_id || props.item.okumasan_order_id || props.item.other_expenses"
                                class="btn btn-primary btn-xs" @click="_showItem(props)">
                            Detail
                        </button>
                    </template>
                    <template slot="fee_type" slot-scope="props">
                        <span>{{props.item.fee_type === 1 ? 'heyakun' : props.item.fee_type === 2 ? 'okumasan' : 'other'}}</span>
                    </template>
                    <template slot="is_processed" slot-scope="props">
                        <span class="label label-success" v-if="props.item.is_processed">YES</span>
                        <span class="label label-danger" v-else>
                            NO
                        </span>
                    </template>
                </item-table>
                <v-paginate :pageCount="pageCount" :page="page" @change="changePage"></v-paginate>
            </div>
        </div>
    </div>
</template>

<script>
    // components
    import vSelect from 'vue-select'
    import vPaginate from '@/components/widgets/Pagination'
    import ItemTable from '@/components/widgets/ItemTable'
    import ItemDetail from '@/components/widgets/ItemDetail'
    import FilterForm from '@/components/widgets/FilterForm'
    // utlis
    import {toJsonData} from '@/utils'
    // mixin
    import {lifeHookMixin, itemMixin} from '@/mixins/item'
    // api
    import {getModel} from '@/api/model'
    // config
    import dColumns from '@/config/columns'

    export default {
        name: "Transactions",
        components: {vSelect, vPaginate, ItemTable, FilterForm, ItemDetail},
        mixins: [lifeHookMixin, itemMixin],
        created() {
            dColumns['OkmOrder'] = [
                {label: 'Actions', key: 'actions', type: 'actions', tdAlign: 'center'},
                {label: '#', key: '#', type: 'serial', tdAlign: 'center'},
                {label: 'id', key: 'id', value: '', sort: false, filter: true, edit: false},
                {label: 'physical_room_id', key: 'physical_room_physical_room_id_hook',value: '', sort: true, filter: true, edit: false, add:true, required: true},
                {label: 'location', key: 'physical_room__location',value: '', sort: true, filter: true, edit: false, add:false},
                {label: 'clean_date', key: 'clean_date',value: '', sort: true, filter: true, edit: true, add:true, inputType: 'date',filterInputType: 'date', required: true},
                {label: 'cleaner_name', key: 'okumasan_cleaner_okumasan_cleaner_name_hook', value: '', sort: true, filter: true, edit: true, add: true,},
                {label: 'reservation_code', key: 'heyakun_order_reservation_code_hook',value: '', sort: true, filter: true, edit: false, add: true},
                // {label: 'cleaner_spending', key: 'cleaner_spending', value: '', sort: true, filter: true, edit: true, add: true, },
                // {label: 'internal_fee', key: 'internal_fee', value: '', sort: true, filter: true, edit: true, add: true, required: true},
                {label: 'order_confirmed', key: 'order_confirmed',value: '', sort: false, filter: true, edit: true, add:false,  inputType: 'checkbox', tdAlign: 'center'},
                {label: 'is_same_day_checkin', key: 'is_same_day_checkin',value: '', sort: false, filter: true, edit: false, tdAlign: 'center'},
                {label: 'next_checkin_comment', key: 'next_checkin_comment',value: '', sort: true, filter: true, edit: true, add:true, inputType: 'textarea'},
                {label: 'comment', key: 'comment',value: '', sort: true, filter: true, edit: true, add:true, inputType: 'textarea'},
                {label: 'external_comment', key: 'external_comment',value: '', sort: true, filter: true, edit: true, add:true, inputType: 'textarea'},
            ]
        },
        data() {
            return {
                orderBy: '-transaction_time',
                itemTitle: ''
            }
        },
        methods: {
            _showItem(props) {
                if (!props.item.id) {
                    return
                }
                this.action = 'show'
                let model = props.item.fee_type === 1 ? 'Order' : props.item.fee_type === 2 ? 'OkmOrder' : 'OtherExpenses'
                this.itemID =  props.item.fee_type === 1
                    ?  props.item.order_id : props.item.fee_type === 2 ? props.item.okumasan_order_id : props.item.other_expenses

                this.tableLoading = true
                getModel(model, null, {id: this.itemID}).then(res => {
                    this.tableLoading = false
                    this.origin = res.data.list[0]
                    let item = []
                    for (let i = 0; i < dColumns[model].length; i++) {
                        let column = dColumns[model][i]
                        if (column.type !== 'actions' && column.type !== 'serial') {
                            let newItem = JSON.parse(JSON.stringify(column))
                            newItem.value = this.origin[column.key]
                            item.push(newItem)
                        }
                    }

                    for (let i = 0; i < item.length; i++) {
                        if (item[i].inputType === 'select' && item[i].multiple) {
                            item[i].value = item[i].value.length > 0 ? item[i].value.split(';') : []
                        }

                        if (item[i].inputType === 'reversecheckbox') {
                            item[i].value = !item[i].value
                        }
                    }

                    this.item = item
                    this.showModal = true
                }).catch(e => {
                    this.tableLoading = false
                })
            }
        },
    }
</script>

<style scoped>

</style>